<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	    <script type="text/javascript" src="/js/jquery-3.2.1.min.js" ></script>
		<script type="text/javascript" src="/js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="/js/my-js.js" ></script>
		<link rel="stylesheet" href="/css/bootstrap.min.css" />
		<link rel="stylesheet" href="/css/my-css.css" />
		<script type="text/javascript" src="/js/marked.min.js" ></script>
		<script type="text/javascript" src="/js/jquery.cookie.js" ></script>
		<title>课程章节</title>
		<style type="text/css">
		    body {font-family: "微软雅黑";}
		    .doc-header {
		        height: 50px;
                width: 100%;
                position: fixed;
                background-color: white;
                border-bottom: 2px solid #F0F0F0;
                padding: 15px 20px 15px 20px;
                font-size: 16px;
            }
			.my-nav-bar {
			    top: 50px;
			    background-color: #F5F5F5;
			    position: fixed;
			    float: left;
			    width: 20%;
			    height: 100%;
			    overflow-y: auto;
			    line-height: 200%;
			    padding: 5px 20px 5px 20px;
			}
			.doc-content {
                top: 50px;
			    width: 80%;
			    float: right;
			    padding: 60px 30px 30px 50px;
			    font-size: 18px;
			    line-height: 150%;
			    word-wrap: break-word; 
			    background-color: white;
			}
			.doc-content img {
			    max-width: 95%;
			    min-width: 400px;
			    margin: 10px 0 10px 0;
			}
			.my-nav-bar h2 {font-size: 16px;}
			.my-nav-bar h3 {
                font-size: 14px;
                padding-left: 20px;
            }
            .nav-current {color: lightseagreen}
            @media screen and (max-width:768px){
                .my-nav-bar {display: none;}
                .doc-content {
                    width: 100%;
                    padding-left: 15px;
                    padding-right: 15px;
                }
            }
		</style>
	</head>
	<body>
	    <div class="doc-header">
	        <a href="#" onclick="backToCourse()">
	            <span class="glyphicon glyphicon-circle-arrow-left"></span>&emsp;返回课程
	        </a>
	    </div>
        <div id="doc-nav" class="my-nav-bar"></div>
        <div id="doc-text" class="doc-content"></div>
	</body>
	<script>
	    var countHeader = 0;
	    var navBar = $("#doc-nav");
	    var rendererMD = new marked.Renderer();
        rendererMD.heading = function (text, level) {
            if (level === 2 || level === 3) {
                return createHeader(level, text, ++countHeader);
            } else {
                return createHeader(level, text);
            }
        };
        myAjax({
        	type: 'get',
        	url: document.location.pathname + '/content',
        	async: false,
        	dataType: 'text',
        	success: function(data) {
                var mdHtml = marked(data, {renderer: rendererMD});
                $("#doc-text").html(mdHtml);
                createNav();
                var $window = $(window);
                var allAnchor = navBar.find("a");
                $window.on("scroll", function() {
                    var nowPos = $window.scrollTop() + 60;
                    for (var i=allAnchor.length-1; i>=0; --i) {
                        if (nowPos >= $(allAnchor[i].hash).offset().top) {
                            allAnchor.removeClass("nav-current").eq(i).addClass("nav-current");
                            break;
                        }
                    }
                });
                $("title").text($("h1").text());
            }
        });
        function createHeader(level, text, count) {
            var h = document.createElement("h" + level);
            if (level <= 3) {
                h.style.fontWeight = "bold";
            }
            if (count !== undefined) {
                h.id = "content-header-" + count;
            }
            h.innerText = text;
            return level <= 2 ? h.outerHTML + "<hr/>" : h.outerHTML;
        }
        function createNav() {
            $(":header[id^='content-header']").each(function() {
                var docThis = $(this);
                var $a = createAnchor(docThis.text(), docThis.attr("id"));
                $a.click(function() {slowScroll.call(this)});
                var h = document.createElement(docThis[0].tagName);
                $(h).append($a);
                navBar.append(h);
            });
            var allAnchor = navBar.find("a");
            function createAnchor(text, targetId) {
                var $a = $("<a></a>");
                $a.attr("href", "#" + targetId);
                $a.text(text);
                return $a;
            }
            function slowScroll() {
                var pos = $(this.hash).offset().top - 60;
                var that = this;
                $('html,body').animate({scrollTop: pos}, 1000, function() {
                    allAnchor.removeClass("nav-current");
                    $(that).addClass("nav-current");
                });
            }
        }
        function backToCourse() {
        	window.location.href = document.location.pathname.split("/chapters")[0];
        }
	</script>
</html>
